{% extends "base/base.html" %}
{% block title %}
Node | SwarmOps - Docker管理平台
{% endblock %}
{% block container %}
{% set Nodes = g.node.GET().data %}
{% if not Nodes %}
<div class="alert alert-danger" role="alert"><i class="icon-remove-sign"></i> 活跃集群异常!!!</div>
{% endif %}
<p>
    <a href="{{ url_for('ui.node') }}"><button type="button" class="btn btn-default"><i class="icon-repeat"></i> Reload</button></a>
    <a href="javascript:NodeAdd()"><button type="button" class="btn btn-success">添加节点</button></a>
    <a href="javascript:NodeDeleteMore()"><button type="button" class="btn btn-danger">批量删除节点</button></a>
</p>
<table class="table table-bordered table-hover table-condensed table-responsive">
    <thead>
        <tr class="active">
            <th style="vertical-align: middle; text-align: center;">Host</th>
            <th style="vertical-align: middle; text-align: center;">ID</th>
            <th style="vertical-align: middle; text-align: center;">角色</th>
            <th style="vertical-align: middle; text-align: center;">状态:有效:可达</th>
            <th style="vertical-align: middle; text-align: center;">硬件资源</th>
            <th style="vertical-align: middle; text-align: center;">标签</th>
            <th style="vertical-align: middle; text-align: center;">时间</th>
            <th style="vertical-align: middle; text-align: center;">版本</th>
        </tr>
    </thead>
    <tbody>
    {% for node in Nodes %}
        <tr>
            <td style='vertical-align: middle; text-align: center;'>
                <div class="btn-group">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" style="width: 150px; max-width: 200px">{{ node[0] }} <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="javascript:NodeUpdate('{{ node[1] }}')"><scan class="text-primary">更新节点</scan></a></li>
                        <li><a href="javascript:NodeDelete('{{ node[0] }}')"><scan class="text-danger">非强制删除节点</scan></a></li>
                    </ul>
                </div>
            </td>
            <td style='vertical-align: middle; text-align: center;'>{{ node[1] }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ node[2] }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ "{}:{}:{}".format(node[3], node[4], node[5]) }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ "CPU:{}".format(node[6]) }}<br/>{{ "Memory:{}G".format(node[7]) }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ node[9] }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ "Create:{}".format(node[10]) }}<br/>{{ "Update:{}".format(node[11]) }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ node[12] }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endblock %}
{% block script %}
<script type="text/javascript">
// 节点数量
document.getElementById("node_number").innerHTML= {{ g.node.GET().data|length }};

// 更新导航
var NavId=null;
var As=document.getElementById('tab').getElementsByTagName('li');
NavId = As[2];
console.log(NavId)
NavId.className='active';

// 询问框、iframe层删除单个节点
function NodeDelete(nodeIp) {
    layer.confirm('你确定要删除此节点?', {
        btn: ['确认删除','我再想想']
    }, function(){
        console.warn("将要删除节点"+nodeIp);
        if (nodeIp) {
            $.ajax({
                url: "{{ url_for('apis.core.node') }}",
                method: 'DELETE',
                async: false,
                datatype: 'json',
                data: {"ip": nodeIp, "force": false},
                success: function(res) {
                    console.log(res);
                    if (res.success==true) {
                        layer.msg("Delete Node Successfully", {icon: 1, time: 3*1000});
                        document.location.reload(); //重载当前页面
                    } else {
                        layer.msg("Delete Node Failed. "+res.msg, {icon: 2, time: 15*1000});
                    }
                },
                error: function(res) {
                    console.log(res);
                    layer.alert(res.statusText);
                }
            });
        }
    }, function() {
        console.log("canel");
    });
}

// iframe层删除多个节点
function NodeDeleteMore() {
    layer.open({
        type: 2,
        title: '批量删除节点',
        shadeClose: true,
        shade: 0.8,
        area: ['680px', '90%'],
        content: '{{ url_for("ui.node_delete") }}'
    });
}

// iframe层更新节点
function NodeUpdate(nodeId) {
    layer.open({
        type: 2,
        title: '更新节点',
        shadeClose: true,
        shade: 0.8,
        area: ['800px', '90%'],
        content: '{{ url_for("ui.node_update") }}?nodeId=' + nodeId
    });
}

// iframe层添加节点
function NodeAdd() {
    layer.open({
        type: 2,
        title: '添加节点',
        shadeClose: true,
        shade: 0.8,
        area: ['800px', '90%'],
        content: '{{ url_for("ui.node_add") }}'
    });
}

</script>
{% endblock %}
